<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>09_Vue实例_生命周期</title>
  </head>
  <body>
    <!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

    <div id="app">
      <button @click="salary+=1000">加薪</button>
      <p>{{salary}}</p>
      <button @click="$destroy()">换工作</button>
    </div>

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data: {
          salary: 2000,
        },
        beforeCreate() {
          console.log('beforeCreate')
          console.log(this);
        },
        created() {
          console.log('created')
        },
        beforeMount() {
          console.log('beforeMount')
        },
        mounted() {
          console.log('mounted')
        },
        beforeUpdate() {
          console.log('beforeUpdate')
        },
        updated() {
          console.log('updated')
        },
        beforeDestroy() {
          console.log('beforeDestroy')
        },
        destroyed() {
          console.log('distroyed')
        },
      })
    </script>
  </body>
</html>
